<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<title>建题</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/base.css" />
<link rel="stylesheet" href="../../Content/css/kaoshi.css" />
<!--编辑器样式-->
<link href="../../Scripts/umeditor1_2_2/themes/default/_css/umeditor.css" type="text/css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<header id="header">
	<!--头部文件从最下面load读取 ../public/head.html--> 
</header>
<div class="container margin-bottom-20" id="main">
	<div class="page-header page-title h4 container-fluid"> <span>建立胜任力测评库</span></div>
	<ul class="list-unstyled  content">
		<li> 
			<h2>
				<span></span>题目名称
			</h2>
		</li>
		<li>
			<input type="text" class="form-control width-480"/>
		</li>
		<li> 
			<h2>
				<span></span>收集证据的建议
			</h2>
		</li>
		<li>
			<textarea class="form-control" rows="5"></textarea>
		</li>
		<li> 
			<h2>
				<span></span>元素范围
				<a data-addbox="yuansufanwei" class="btn btn-success btn-xs pull-right"><i class="glyphicon glyphicon-plus"></i>新增</a>
			</h2>
		</li>
		<li>
			<div data-panel="yuansufanwei" class="row">
				
			</div>
			<div class="clear-both"></div>
		</li>
		<li> 
			<h2>
				<span></span>能力要求
				<a data-addbox="nengliyaoqiu" class="btn btn-success btn-xs pull-right"><i class="glyphicon glyphicon-plus"></i>新增</a>
			</h2>
		</li>
		<li>
			<div data-panel="nengliyaoqiu" class="row">
				
			</div>
		</li>
		<li> 
			<h2>
				<span></span>证据说明
			</h2>
		</li>
		<li>
			<textarea class="form-control" rows="5"></textarea>
		</li>
		<li class="text-center">
			<a class="btn btn-primary">返回</a>
			<a class="btn btn-primary">保存</a>
			
		</li>
	</ul>
</div>


<!--
	描述：元素范围模板
-->
<div class="col-md-3 margin-10-auto hidden yuansufanwei" data-tmpl="yuansufanwei">
	<table border="0" cellpadding="0"  cellspacing="0" class="table table-hover text-center table-bordered ">
		<thead>
			<tr>
				<th  colspan="2" class="bg-grey">
					<div class="form-inline">
						<input class="form-control" type="text" placeholder="证词要点"/>
						<button type="button" class="close"><span class="glyphicon glyphicon-remove"></span></button>
					</div>
				</th>
				
			</tr>
		</thead>
		<tbody>
			<tr>
				<td width="60%">
					<input class="form-control" type="text" placeholder="接待场景"/>
				</td>
				<td width="40%">
					<a  data-btn="remove"><span class="glyphicon glyphicon-trash"></span></a>
					<a  data-btn="add"><span class="glyphicon glyphicon-plus"></span></a>					
				</td>
			</tr>
			<tr>
				<td>
					<input class="form-control" type="text" placeholder="顾客状况"/>
				</td>
				<td>
					<a  data-btn="remove"><span class="glyphicon glyphicon-trash"></span></a>
					<a  data-btn="add"><span class="glyphicon glyphicon-plus"></span></a>			
				</td>
			</tr>
			<tr>
				<td>
					<input class="form-control" type="text" placeholder="原因需求"/>
				</td>
				<td>
					<a  data-btn="remove"><span class="glyphicon glyphicon-trash"></span></a>
					<a  data-btn="add"><span class="glyphicon glyphicon-plus"></span></a>			
				</td>
			</tr>
		</tbody>
	</table>
</div>
<!--
	描述：能力要求模板
-->
<div  class="form-horizontal margin-10-auto hidden" data-tmpl="nengliyaoqiu">
	<div class="col-md-3">
		<input class="form-control" type="text" placeholder="能力要求标题"/>
	</div>
	<div class="col-md-9 nenli">
		<input type="text" class="form-control" />
		<a data-btn="remove" class="nenli-remove"><span class="glyphicon glyphicon-trash"></span></a> 
	</div>
	<div class="clear-both"></div>
</div>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/base.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
	//读取共用的头部和菜单文件
	$("#header").load("header.html nav");
	
	//增加元素范围及能力要求模块事件
	$('a[data-addbox]').on('click',function(e){
		var box_id=$(this).attr('data-addbox'),copy_tmpl;
		if(box_id=='yuansufanwei'){			
			copy_tmpl=$('div[data-tmpl="'+box_id+'"]').clone().removeClass('hidden').removeAttr('data-tmpl');
			$('div[data-panel="'+box_id+'"]').append(copy_tmpl)
			
			//绑定增加删除事件
			copy_tmpl.delegate('a[data-btn]','click',function(){
				var btn_type=$(this).attr('data-btn');
				if(btn_type=='add'){
					var row_tmpl=$(this).parents('tr').clone();
					$(this).parents('tr').after(row_tmpl);
					
				}else if(btn_type=='remove'){
					$(this).parents('tr').remove()
				}
			})
			//绑定删除整个表格事件
			copy_tmpl.delegate('button.close','click',function(){
				$(this).parents('div.margin-10-auto').remove();
			})
		}else if(box_id=='nengliyaoqiu'){
			copy_tmpl=$('div[data-tmpl="'+box_id+'"]').clone().removeClass('hidden').removeAttr('data-tmpl');
			
			//绑定删除事件
			copy_tmpl.delegate('a[data-btn]','click',function(){
				$(this).parents('div.form-horizontal').remove()
			})
			
			$('div[data-panel="'+box_id+'"]').append(copy_tmpl)
		}
		
		
	})
	.trigger('click') //触发一次事件，用于填充一次内容，为了模块内容不为空，可以删除;
	/*结束*/
	
})
</script>

</body>
</html>
